<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>WingPick Pro - 产品列表</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2',
                        'primary-variant': '#0D47A1',
                        secondary: '#FF6F00',
                        'secondary-variant': '#E65100',
                        background: '#F5F5F5',
                        surface: '#FFFFFF',
                        'on-surface': '#212121',
                        'on-surface-variant': '#757575',
                        border: '#E0E0E0',
                        success: '#4CAF50',
                        warning: '#FFC107',
                        error: '#F44336',
                        info: '#2196F3'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .android-card {
                @apply bg-surface rounded-2xl shadow-sm p-4;
            }
            .android-button {
                @apply bg-primary text-white py-2 px-4 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .android-button-secondary {
                @apply bg-white text-primary border border-primary py-2 px-4 rounded-lg font-medium transition-all duration-200 active:scale-95;
            }
            .filter-chip {
                @apply px-3 py-1 rounded-full text-sm cursor-pointer transition-all duration-200;
            }
            .filter-chip-active {
                @apply bg-primary text-white;
            }
            .filter-chip-inactive {
                @apply bg-surface text-on-surface border border-border;
            }
        }
    </style>
</head>
<body class="bg-background font-roboto text-on-surface min-h-screen">
    <!-- Android 状态栏 -->
    <div class="bg-primary h-7 w-full flex items-center justify-between px-4">
        <div class="text-white text-xs">18:30</div>
        <div class="flex items-center space-x-1">
            <i class="fa fa-signal text-white text-xs"></i>
            <i class="fa fa-wifi text-white text-xs"></i>
            <i class="fa fa-battery-three-quarters text-white text-xs"></i>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="flex items-center h-14 px-4">
            <button id="backButton" class="mr-4">
                <i class="fa fa-arrow-left text-lg"></i>
            </button>
            <div class="text-lg font-semibold flex-1 text-center mr-4">产品列表</div>
        </div>
    </header>

    <!-- 搜索栏 -->
    <div class="p-4">
        <div class="relative">
            <input type="text" placeholder="搜索产品型号或名称" class="w-full pl-10 pr-4 py-2 rounded-lg border border-border bg-surface">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-on-surface-variant"></i>
        </div>
    </div>

    <!-- 筛选标签 -->
    <div class="px-4 pb-2">
        <div class="flex items-center space-x-2 overflow-x-auto pb-2 no-scrollbar">
            <div class="filter-chip filter-chip-active">全部</div>
            <div class="filter-chip filter-chip-inactive">轻型直升机</div>
            <div class="filter-chip filter-chip-inactive">中型直升机</div>
            <div class="filter-chip filter-chip-inactive">重型直升机</div>
            <div class="filter-chip filter-chip-inactive">多用途</div>
            <div class="filter-chip filter-chip-inactive">应急救援</div>
        </div>
    </div>

    <!-- 产品列表 -->
    <main class="p-4 space-y-4 pb-24">
        <!-- 产品卡片 1 -->
        <div class="android-card product-card">
            <div class="flex space-x-3">
                <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0">
                    <img src="../../WingPick Pro/static/AC311A.png" alt="AC311A直升机" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                    <h3 class="font-semibold text-lg">AC311A</h3>
                    <p class="text-on-surface-variant text-sm mb-1">轻型多用途直升机</p>
                    <div class="flex items-center text-sm text-on-surface-variant mb-2">
                        <span class="mr-3"><i class="fa fa-users mr-1"></i> 5座</span>
                        <span><i class="fa fa-tachometer mr-1"></i> 258km/h</span>
                    </div>
                    <p class="font-medium text-primary mb-2">¥12,500,000 起</p>
                    <div class="flex space-x-2">
                        <button class="android-button-secondary text-xs py-1 px-3">
                            查看详情
                        </button>
                        <button class="android-button text-xs py-1 px-3">
                            配置报价
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品卡片 2 -->
        <div class="android-card product-card">
            <div class="flex space-x-3">
                <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0">
                    <img src="../../WingPick Pro/static/AC313A.png" alt="AC313A直升机" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                    <h3 class="font-semibold text-lg">AC313A</h3>
                    <p class="text-on-surface-variant text-sm mb-1">中型多用途直升机</p>
                    <div class="flex items-center text-sm text-on-surface-variant mb-2">
                        <span class="mr-3"><i class="fa fa-users mr-1"></i> 18座</span>
                        <span><i class="fa fa-tachometer mr-1"></i> 275km/h</span>
                    </div>
                    <p class="font-medium text-primary mb-2">¥25,800,000 起</p>
                    <div class="flex space-x-2">
                        <button class="android-button-secondary text-xs py-1 px-3">
                            查看详情
                        </button>
                        <button class="android-button text-xs py-1 px-3">
                            配置报价
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品卡片 3 -->
        <div class="android-card product-card">
            <div class="flex space-x-3">
                <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-200">
                    <img src="https://images.unsplash.com/photo-1567538001901-5e1a359d898b?q=80&w=200&auto=format&fit=crop" alt="AC312直升机" class="w-full h-full object-cover">
                    <!-- 图片来源: Unsplash -->
                </div>
                <div class="flex-1">
                    <h3 class="font-semibold text-lg">AC312</h3>
                    <p class="text-on-surface-variant text-sm mb-1">中型双发直升机</p>
                    <div class="flex items-center text-sm text-on-surface-variant mb-2">
                        <span class="mr-3"><i class="fa fa-users mr-1"></i> 10座</span>
                        <span><i class="fa fa-tachometer mr-1"></i> 260km/h</span>
                    </div>
                    <p class="font-medium text-primary mb-2">¥16,800,000 起</p>
                    <div class="flex space-x-2">
                        <button class="android-button-secondary text-xs py-1 px-3">
                            查看详情
                        </button>
                        <button class="android-button text-xs py-1 px-3">
                            配置报价
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品卡片 4 -->
        <div class="android-card product-card">
            <div class="flex space-x-3">
                <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-200">
                    <img src="https://images.unsplash.com/photo-1610639423563-ea4f1a541e47?q=80&w=200&auto=format&fit=crop" alt="AC352直升机" class="w-full h-full object-cover">
                    <!-- 图片来源: Unsplash -->
                </div>
                <div class="flex-1">
                    <h3 class="font-semibold text-lg">AC352</h3>
                    <p class="text-on-surface-variant text-sm mb-1">中型先进直升机</p>
                    <div class="flex items-center text-sm text-on-surface-variant mb-2">
                        <span class="mr-3"><i class="fa fa-users mr-1"></i> 14座</span>
                        <span><i class="fa fa-tachometer mr-1"></i> 315km/h</span>
                    </div>
                    <p class="font-medium text-primary mb-2">¥22,600,000 起</p>
                    <div class="flex space-x-2">
                        <button class="android-button-secondary text-xs py-1 px-3">
                            查看详情
                        </button>
                        <button class="android-button text-xs py-1 px-3">
                            配置报价
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-surface border-t border-border">
        <div class="flex justify-around">
            <a href="index.html" class="flex flex-col items-center justify-center py-2 text-on-surface-variant">
                <i class="fa fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="product-list.html" class="flex flex-col items-center justify-center py-2 text-primary">
                <i class="fa fa-briefcase text-xl"></i>
                <span class="text-xs mt-1">产品</span>
            </a>
            <a href="plan-list.html" class="flex flex-col items-center justify-center py-2 text-on-surface-variant">
                <i class="fa fa-file-invoice-dollar text-xl"></i>
                <span class="text-xs mt-1">报价</span>
            </a>
        </div>
    </footer>

    <script>
        // 返回按钮点击事件
        document.getElementById('backButton').addEventListener('click', function() {
            window.history.back();
        });

        // 筛选标签点击事件
        document.querySelectorAll('.filter-chip').forEach(chip => {
            chip.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.filter-chip').forEach(c => {
                    c.classList.remove('filter-chip-active');
                    c.classList.add('filter-chip-inactive');
                });
                // 设置当前标签为活跃状态
                this.classList.remove('filter-chip-inactive');
                this.classList.add('filter-chip-active');
            });
        });

        // 产品卡片点击事件（查看详情）
        document.querySelectorAll('.product-card .android-button-secondary').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                // 这里可以添加查看产品详情的逻辑
                window.location.href = 'product-detail.html?id=' + encodeURIComponent(this.closest('.product-card').querySelector('h3').textContent);
            });
        });

        // 产品卡片点击事件（配置报价）
        document.querySelectorAll('.product-card .android-button').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                // 这里可以添加配置报价的逻辑
                window.location.href = 'config-engine.html?product=' + encodeURIComponent(this.closest('.product-card').querySelector('h3').textContent);
            });
        });
    </script>
</body>
</html>